import './App.css';
import React , {Component} from 'react';
import Navigator from './navigator';

// 函数式组件写法
// function App() {
//   return (
//     <div className="App">
//       111
//     </div>
//   );
// }
function UserGreeting () {
    return(
      <h5>欢迎回来!</h5>
    )
}

function GuestGreeting () {
  return (
      <h5>请先注册!</h5>
  )
}

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
      return <UserGreeting/>;
    }
    return <GuestGreeting />
}

function Blog (props) {
  console.log(props)
  const content = props.posts.map(post => {
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  });
  console.log(content)
  return (
    <div>{content}</div>
  )
}

//类式组件写法
class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      isLoggedIn:true
    }
    //绑定是必要的，这样 `this` 才能在函数中使用
    // this.handleClick = this.handleClick.bind(this);
  }

  //类的默认方法是不会绑定this的
  handleClick (val,e) {
    //console.log(this);  //默认是undefined,绑定this后--> App实例对象
    console.log('事件处理函数传递参数',val);
    this.setState({
      isLoggedIn: !this.state.isLoggedIn
    })
  }

  render () {
    return (
      <div className='App'>
        {/* <button onClick={this.handleClick}>
          {this.state.isToggleOn}
        </button> */}
        <button onClick={this.handleClick.bind(this, this.state.isLoggedIn)}>
          {this.state.isLoggedIn ? '退出' : '登录'}
        </button>
        <Navigator  name="张三" age={18}  speak={speak}/>
        <Greeting isLoggedIn={this.state.isLoggedIn} />
        <Blog posts={posts} />
      </div>
    )
  }

}


function speak () {
    console.log('这是我的信息...');
}
const posts = [
  {id :1, title: '222',  content: 'zoukai'},
  {id :2, title: '111',  content: 'woaini'}
]
export default App;
